<template>
  <div class="road-main-content">
      <div class="wy-main-title  wy-m-t-20 info-1200">
          <p>首页  /  物流信息服务  /   <span>线路信息</span></p>
      </div>
      <div class="r-hot-way info-1200">
        <div class="r-hot-title">
          <span></span>
          <span>热门线路</span>
          <img src="./../../static/img/index/hot.png">
        </div>
        <div class="r-hot-city">
          <ul>
            <li v-for="(item,index) in hotLineList" :key="index" @click="addChange(item)">
                <!-- <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity"> -->
                  <span>{{item.fromCity}}</span>
                  <span></span>
                  <span>{{item.toCity}}</span>
                <!-- </nuxt-link> -->
            </li>
          </ul>
        </div>
    </div>
    <!-- 热门路线结束 -->
    <div class="road-startCity">
          <a-form :form="form" class='info-1200'>
              <a-row :gutter='24' class='city-form'>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                        <a-input  placeholder="请选择出发地"  v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择车辆到达地" v-model="toCity" readOnly @click="magSvgShowMap('destinationCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                    <a-form-item label="公司名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input v-model="companyName" placeholder="请输入公司名称"  maxlength="100" />
                    </a-form-item>
                </a-col>
                <a-col :span='8'>
                  <router-link :to="'/transport/list?fromCity='+fromCity+'&toCity='+toCity+'&companyName='+companyName">
                    <a-button type="primary" :span='2' style='margin:0 20px 0 20px;' class='ant-btn-primary'>搜索</a-button>
                  </router-link>
                  <a-button :span='2' @click="reset">重置</a-button>
                </a-col>
              </a-row>
          </a-form>
    </div>
     <!-- 出发城市结束 -->
    <div v-for="(item,index) in lineCityList" v-if="item.liList.length||item.waiList.length" :key="index" class="r-cityChose info-1200" style="margin-top:24px;">
          <div class="r-hot-title r-hot-title-hasline">
              <span></span>
              <span>{{item.city}}</span>
              <nuxt-link :to="`/transport/list?fromCity=`+item.city+'&type='+1">更多</nuxt-link>
          </div>
          <!-- 城市选择 -->
          <ul>
            <li v-for="(chind,index) in item.liList" :key="index">
                <nuxt-link :to="'/transport/list?fromCity='+chind.beginPlace+'&toCity='+chind.endPlace">
                    <span>{{chind.fromCity}}</span>
                    <span></span>
                    <span>{{chind.toCity}}</span>
                </nuxt-link>
            </li>
          </ul>
          <ul>
            <li v-for="(chind,index) in item.waiList" :key="index">
                <nuxt-link :to="'/transport/list?fromCity='+chind.beginPlace+'&toCity='+chind.beginPlace">
                    <span>{{chind.fromCity}}</span>
                    <span></span>
                    <span>{{chind.toCity}}</span>
                </nuxt-link>
            </li>
          </ul>
    </div>
    <!-- <div class="r-btn">
        <a-button class='ant-btn-primary' type="primary">查看更多</a-button>
    </div> -->
    <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
  </div>
</template>

<script>
import MapSvg from '@/components/dialog/MapSvg'
import { configDictionary } from '@/utils/configDictionary'
export default {
   components: {
    MapSvg
  },
  data () {
    return {
      // 起运地地址
      departureCar: '',
      destinationCar: '',
      depeartureCar: '',

      fromCity: '',
      toCity: '',
      companyName: '',
      // 热门线路列表
      hotLineList: [],
      // 线路城市动态数据定义
      lineCityList: []
    }
  },
   beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created: function() {
    for ( var i = 0;i<configDictionary.hotCity.length;i++ ) {
      this.lineCityList.push({
        city: configDictionary.hotCity[i],
        liList: [],
        waiList: []
      })
    }
    this.lineGetSelectLines(0,configDictionary.hotCity[0],'liList');
    this.lineGetSelectLines(0,configDictionary.hotCity[0],'waiList');
    this.lineGetSelectLines(1,configDictionary.hotCity[1],'liList');
    this.lineGetSelectLines(1,configDictionary.hotCity[1],'waiList');
    this.lineGetSelectLines(2,configDictionary.hotCity[2],'liList');
    this.lineGetSelectLines(2,configDictionary.hotCity[2],'waiList');
    this.lineGetSelectLines(3,configDictionary.hotCity[3],'liList');
    this.lineGetSelectLines(3,configDictionary.hotCity[3],'waiList');
    this.lineGetSelectLines(4,configDictionary.hotCity[4],'liList');
    this.lineGetSelectLines(4,configDictionary.hotCity[4],'waiList');
    this.lineGetSelectLines(5,configDictionary.hotCity[5],'liList');
    this.lineGetSelectLines(5,configDictionary.hotCity[5],'waiList');
    this.lineGetSelectLines(6,configDictionary.hotCity[6],'liList');
    this.lineGetSelectLines(6,configDictionary.hotCity[6],'waiList');
    this.lineGetSelectLines(7,configDictionary.hotCity[7],'liList');
    this.lineGetSelectLines(7,configDictionary.hotCity[7],'waiList');
    this.lineGetSelectLines(8,configDictionary.hotCity[8],'liList');
    this.lineGetSelectLines(8,configDictionary.hotCity[8],'waiList');
    this.lineGetSelectLines(9,configDictionary.hotCity[9],'liList');
    this.lineGetSelectLines(9,configDictionary.hotCity[9],'waiList');
    this.lineGetSelectLines(10,configDictionary.hotCity[10],'liList');
    this.lineGetSelectLines(10,configDictionary.hotCity[10],'waiList');
    this.lineGetSelectLines(11,configDictionary.hotCity[11],'liList');
    this.lineGetSelectLines(11,configDictionary.hotCity[11],'waiList');
    this.lineGetSelectLines(12,configDictionary.hotCity[12],'liList');
    this.lineGetSelectLines(12,configDictionary.hotCity[12],'waiList');
    this.lineGetSelectLines(13,configDictionary.hotCity[13],'liList');
    this.lineGetSelectLines(13,configDictionary.hotCity[13],'waiList');
    this.lineGetSelectLines(14,configDictionary.hotCity[14],'liList');
    this.lineGetSelectLines(14,configDictionary.hotCity[14],'waiList');
    this.lineGetSelectLines(15,configDictionary.hotCity[15],'liList');
    this.lineGetSelectLines(15,configDictionary.hotCity[15],'waiList');
    // this.lineGetSelectLines(16,configDictionary.hotCity[16],'liList');
    // this.lineGetSelectLines(16,configDictionary.hotCity[16],'waiList');
    this.lineGetLinesHot();
  },
  components:{
    MapSvg
  },
  methods: {
    // 获取热门线路
    async lineGetLinesHot () {
      const res = await this.$store.dispatch('info/lineGetLinesHot',{
        pageSize: 10,
        pageNum: 1,
        hotLine: 1
      })
      if (res.status) {
        this.hotLineList = res.data;
      } 
    },
    // 线路列表查询 
    async lineGetSelectLines (index,city,inner) {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          fromCity: city,
          innerProvince: inner=='liList'?1:0,
          pageSize: 12,
          pageIndex: 1,
        })
        if (res.status) {
          this.lineCityList[index][inner] = res.data;
          // this.list = res.data;
        } 
    },
     addChange(item){
        this.fromCity = item.beginPlace;
        this.toCity = item.endPlace;
        this.depeartureCar = item.beginPlace;
        this.destinationCar = item.endPlace;
        // this.lineGetSelectLines()
      },
    // 重置
    reset () {
      this.fromCity = '';
      this.toCity = '';
      this.companyName = '';
    },
    // 省市地图回调
    mapSvgCall (d) {
      // this[d.name] = d.city;
       this[d.name] = d.provCityArea;
        if(d.name=='departureCar'){
          this.fromCity = d.provCityArea;
        }
        if(d.name=='destinationCar'){
          this.toCity = d.provCityArea;
        }     
    },
    // 起运地
    magSvgShowMap (name) {
      this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
    },
    // 调用距离返回
    distanceCall (num) {
    }
  }

}

</script>
<style lang="scss">
@import "./../../assets/css/info/road.scss";
</style>